<template>
  <view class="">
    <!-- 弹出框 -->
    <view class="masks" @click="colseBtn" v-if="isSHow"></view>
    <view class="kuangs paddingA40 marR40 marL40 boxSize" v-if="isSHow">
      <image
        class="iconSize30 floatR"
        src="/src/static/logo.png"
        mode=""
        @click="colseBtn"
      ></image>
      <view class="FontCenter fontSize16 fontWei marB60 marT60 widP100">
        <view class="marB40">
          {{ zdTit }}
        </view>
        <view
          style="display: flex; justify-content: space-between; flex-wrap: wrap"
        >
          <view class="item" v-for="(item, index) in 10" :key="index">
            <image
              style="width: 60rpx; height: 60rpx"
              src="https://img1.baidu.com/it/u=1862180176,3083925166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            >
              <view style="font-size: 26rpx; margin-top: -121rpx"
                >功能{{ index }}</view
              ></image
            >
          </view>
        </view>
      </view>
      <view class="display widP100 marT80">
        <view class="kuangbtn" @click="colseBtn"> 取消 </view>
        <view class="kuangbtn kuangbtn1" @click="zdBtn"> 确定 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      searTxt: '搜索',
    }
  },
  props: {
    // 组件输入值
    zdTit: {
      type: [String],
      default: '提示文字',
    },
    zdTxt: {
      type: [String],
      default: '提示内容',
    },
    isSHow: {
      type: [Boolean],
      default: false,
    },
  },
  methods: {
    //点击取消按钮
    colseBtn() {
      this.$emit('colseBtn')
    },

    //点击确定按钮
    zdBtn() {
      this.$emit('zdBtn')
    },
  },
  computed: {
    // 子组件中更改绑定的prop值最好使用计算属性computed解决
  },
  watch: {
    // father(){
    //   this.son = "儿子"
    // }
  },
}
</script>

<style>
.masks {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #2f2f2f;
  opacity: 0.8;
  z-index: 99;
}

.kuangs {
  width: 90%;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 100);
  position: fixed;
  top: 10%;
  z-index: 999;
}

.kuangbtn {
  width: 316rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 60rpx 0px 0px 60rpx;
  background-color: rgba(246, 247, 251, 100);
  color: rgba(47, 47, 47, 100);
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(47, 47, 47, 100);
}

.kuangbtn1 {
  border-radius: 0px 60rpx 60rpx 0px;
  background-color: rgba(47, 47, 47, 100);
  color: #fff;
}
.paddingA40 {
  padding: 40rpx;
}
.marR40 {
  margin-bottom: 40rpx;
}
.marL40 {
  margin-left: 40rpx;
}
.boxSize {
  box-sizing: border-box;
}
.marB40 {
  width: 100%;
  height: 50rpx;
  color: #fff;
  background-color: #262b3a;
  margin-bottom: 40rpx;
}
.FontCenter {
  text-align: center;
}

.fontSize16 {
  font-size: 32rpx;
}
.fontBold {
  font-weight: bold;
}
.marB60 {
  margin-bottom: 60rpx;
}
.marT60 {
  margin-top: 60rpx;
}
.widP100 {
  width: 100%;
}
.marT80 {
  margin-top: 80rpx;
}
.iconSize30 {
  width: 62rpx;
  height: 62rpx;
}
.floatR {
  float: right;
}
.display {
  display: flex;
}
.fontWei {
  font-weight: bold;
}
.item {
  color: black;
  flex: 0 0 24%;
  height: 160rpx;
  width: 160rpx;
  text-align: center;
  line-height: 160rpx;
  background-color: white;
  /* 边距懒得算，css函数代替 */
  margin-right: calc(4% / 3);
  margin-bottom: calc(4% / 3);
}
/* 去除每行尾的多余边距 */
.item:nth-child(4n) {
  margin-right: 0;
}
/* 使最后一个元素的边距填满剩余空间 */
.item:last-child {
  margin-right: auto;
}
</style>
